<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>MVC DOH Test</title>
		<style>
			@import "../../../../dojo/resources/dojo.css";
			@import "../../../../dijit/tests/css/dijitTests.css";
			@import "../css/app-format.css";
		</style>
		<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>
		<script src="../../../../dojo/dojo.js" type="text/javascript" data-dojo-config="isDebug: true, mvc: {debugBindings: true}"></script>
		<script type="text/javascript" src="./helpers.js"></script>
		<script type="text/javascript">
			var ctrl, data1, data2, data3;

			require([
				"doh/runner",
				"dojo/_base/array",
				"dojo/_base/lang",
				"dojo/when",
				"dojo/parser",
				"dojo/store/Memory",
				"dijit/registry",
				"dojox/mvc/getStateful",
				"dojox/mvc/ModelRefController",
				"dijit/form/TextBox",
				"dijit/form/Button",
				"dojox/mvc/Group",
				"dojox/mvc/Output",
				"dojox/mvc/Repeat",
				"dojo/domReady!"
			], function(doh, array, lang, when, parser, MemoryStore, registry, getStateful, ModelRefController){

				function runTests(){
					doh.register("Tests", [
						{
							name : "initial",
							runTest : function() {
								ctrl.set("model", ctrl.get("model1"));
								doh.is("Anne1", registry.byId("nameInput0").get("value"), "nameInput0 should be Anne1");
								doh.is("Ben1", registry.byId("nameInput1").get("value"), "nameInput1 should be Ben1 ");
								doh.is("Chad1", registry.byId("nameInput2").get("value"), "nameInput2 should be Chad1");
								doh.is("Anne1", registry.byId("firstnameOutput10").get("value"), "firstnameOutput10 should be Anne1");
								doh.is("Ben1", registry.byId("firstnameOutput11").get("value"), "firstnameOutput11 should be Ben1 ");
								doh.is("Chad1", registry.byId("firstnameOutput12").get("value"), "firstnameOutput12 should be Chad1");
								doh.is("Anne2", registry.byId("firstnameOutput20").get("value"), "firstnameOutput20 should be Anne2");
								doh.is("Ben2", registry.byId("firstnameOutput21").get("value"), "firstnameOutput21 should be Ben2 ");
								doh.is("", registry.byId("firstnameOutput30").get("value"), "firstnameOutput30 should be blank");
							}
						}, {
							name : "SelectModel2",
							runTest : function() {
								ctrl.set("model", ctrl.get("model2"));
								doh.is("Anne2", registry.byId("nameInput0").get("value"), "nameInput0 should be Anne2");
								doh.is("Ben2", registry.byId("nameInput1").get("value"), "nameInput1 should be Ben2 ");
							}
						}, {
							name : "ChangeModel2",
							runTest : function() {
								registry.byId("nameInput0").set("value", "Anne2-Update");
								doh.is("Anne2-Update", registry.byId("nameInput0").get("value"), "nameInput0 should be Anne2-Update");
								doh.is("Ben2", registry.byId("nameInput1").get("value"), "nameInput1 should be Ben2 ");
								doh.is("Anne2-Update", registry.byId("firstnameOutput20").get("value"), "firstnameOutput20 should be Anne2-Update");
								doh.is("Ben2",  registry.byId("firstnameOutput21").get("value"), "firstnameOutput21 should be Ben2 ");
							}
						}, {
							name : "SelectModel3",
							runTest : function() {
								ctrl.set("model", ctrl.get("model3"));
								doh.is("", registry.byId("nameInput0").get("value"), "nameInput0 should be blank");
							}
						}, {
							name : "ChangeModel3",
							runTest : function() {
								registry.byId("nameInput0").set("value", "Anne3-Update");
								doh.is("Anne3-Update", registry.byId("nameInput0").get("value"), "nameInput0 should be Anne3-Update");
								doh.is("Anne3-Update", registry.byId("firstnameOutput30").get("value"), "firstnameOutput30 should be Anne3-Update");
							}
						}, {
							name : "UpdateData1",
							runTest : function() {
								var newdata = {
									"Results": [
										{
											"First": "Anne1x",
											"Last": "Ackerman1x"
										},
										{
											"First": "Ben1x",
											"Last": "Beckham1x"
										}
									]
								};
								ctrl.set("model", newdata);
								doh.is("Anne1x", registry.byId("nameInput0").get("value"), "nameInput0 should be Anne1X");
							}
						}
					]);

					doh.run();
				}

				ctrl = new ModelRefController({ownProps: {model1: 1, model2: 1, model3: 1}});

				when(parser.parse(), function(){
					when((new MemoryStore({data: data1 = [
						{
							"Query": "Engineers1",
							"Results": [
								{
									"First": "Anne1",
									"Last": "Ackerman1"
								},
								{
									"First": "Ben1",
									"Last": "Beckham1"
								},
								{
									"First": "Chad1",
									"Last": "Chapman1"
								}
							]
						}
					]})).query(), function(data){
						ctrl.set("model1", getStateful(data)[0]);
						if(ctrl.get("model1") && ctrl.get("model2") && ctrl.get("model3")){ runTests(); }
					});

					when((new MemoryStore({data: data2 = [
						{
							"Query": "Engineers2",
							"Results": [
								{
									"First": "Anne2",
									"Last": "Ackerman2"
								},
								{
									"First": "Ben2",
									"Last": "Beckham2"
								}
							]
						}
					]}).query()), function(data){
						ctrl.set("model2", getStateful(data)[0]);
						if(ctrl.get("model1") && ctrl.get("model2") && ctrl.get("model3")){ runTests(); }
					});

					when((new MemoryStore({data: data3 = [
						{
							"Query": "Engineers3",
							"Results": [
								{
									"First": "",
									"Last": ""
								}
							]
						}
					]}).query()), function(data){
						ctrl.set("model3", getStateful(data)[0]);
						if(ctrl.get("model1") && ctrl.get("model2") && ctrl.get("model3")){ runTests(); }
					});
				});
			});
		</script>
	</head>
	<body class="claro">
		<script type="dojo/require">at: "dojox/mvc/at"</script>
		<div id="wrapper">
			<div id="header">
				<div id="navigation"></div>
				<div id="headerInsert">
					<h1>Input Output Sync</h1>
					<h2>Data Binding Example</h2>
				</div>
			</div>
			<div id="main">
				<div id="leftNav"></div>
				<div id="mainContent">
					<div id="repeatId" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="children: at(ctrl, 'Results')">
						<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:${this.index}')">
							<label class="cell" for="nameInput${this.index}">Name:</label>
							<input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}" data-dojo-props="value: at('rel:', 'First')"/>
						</div>
					</div>
					<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'model1')">
						<div data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:', 'Results')">
							<span>
								Model1 Output is ==> 
							</span>
							<span id="firstnameOutput10" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:0', 'First')">
								Name1 is "${this.value}" : 
							</span>
							<span id="firstnameOutput11" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:1', 'First')">
								Name2 is "${this.value}" : 
							</span>
							<span id="firstnameOutput12" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:2', 'First')">
								Name3 is "${this.value}"
							</span>
						</div>
					</div>
					<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'model2')">
						<div data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:', 'Results')">
							<span>
								Model2 Output is ==>
							</span>
							<span id="firstnameOutput20" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:0', 'First')">
								Name1 is "${this.value}" : 
							</span>
							<span id="firstnameOutput21" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:1', 'First')">
								Name2 is "${this.value}"
							</span>
						</div>
					</div>
					<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'model3')">
						<div data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:', 'Results')">
							<span>
								Model3 Output is ==>
							</span>
							<span id="firstnameOutput30" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:0', 'First')">
								Name1 is "${this.value}"
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
